<template>
    <form ref="form" :class="{ 'form-disabled': playInfo.is_waiting === 1 }" @submit="onSubmit">
        <view class="form-item__box form-item__right">
            <view class="form-item">
                <view class="form-item__label">活动余额</view>
                <view class="form-item__content flex-j-end">{{ balance }}元</view>
            </view>
            <view class="form-item">
                <view class="form-item__label">红包金额</view>
                <view class="form-item__content">
                    <input @input="input($event, 'amount')" placeholder-class="placeholder" :value="formData.amount" name="amount" class="form-item__input" type="digit" placeholder="请输入红包金额" />
                    <icon v-if="formData.amount" @click="clear('amount')" class="clear-icon" type="clear" size="16"> </icon>
                </view>
            </view>
            <view class="form-item" v-if="activeId === 300 || activeId === 301">
                <view class="form-item__label">红包个数</view>
                <view class="form-item__content">
                    <input @input="input($event, 'num')" placeholder-class="placeholder" :value="formData.num" name="num" class="form-item__input" type="number" placeholder="请输入红包个数" />
                    <icon v-if="formData.num" @click="clear('num')" class="clear-icon" type="clear" size="16"> </icon>
                </view>
            </view>
        </view>
        <view class="page-footer static">
            <button class="btn-primary flex" form-type="submit" :loading="loading" :disabled="playInfo.is_waiting === 1">
                {{ loading ? "提交中" : "提交" }}
            </button>
        </view>
    </form>
</template>

<script>
import WxValidate from "@/utils/WxValidate"
import { mapGetters } from "vuex"
export default {
    data() {
        return {
            loading: false,
            formData: {
                amount: "", //红包金额
                num: "" //红包个数
            },
            validate: ""
        }
    },
    props: ["activeId", "playInfo"],
    watch: {
        activeId: {
            handler(val) {
                let rules = Object.assign(
                    {},
                    {
                        amount: { required: true, min: 1 }
                    },
                    val === 300 || val === 301 ? { num: { required: true, min: 1 } } : {}
                )
                let message = Object.assign(
                    {},
                    {
                        amount: { required: "请输入红包金额", min: "金额不能低于1元" }
                    },
                    val === 300 || val === 301 ? { num: { required: "请输入红包个数", min: "红包个数不能少于1个" } } : {}
                )
                this.validate = new WxValidate(rules, message)
            },
            immediate: true
        }
    },
    computed: {
        ...mapGetters(["activityInfo"]),
        balance() {
            if (!this.activityInfo?.balance) return 0
            return Number(((this.activityInfo?.balance ?? 0) / 100).toFixed(2))
        }
    },
    mounted() {},
    methods: {
        clear(name) {
            this.formData[name] = ""
            this.$nextTick(() => {
                this.send("ready", 0)
            })
        },
        reset() {
            this.formData = {
                amount: "", //红包金额
                num: "" //红包个数
            }
        },
        input(e, name) {
            this.formData[name] = e.detail.value
            this.$nextTick(() => {
                this.send("ready", 0)
            })
        },
        send(cmd, is_waiting) {
            let { amount, num } = this.formData
            this.$emit("changeAmount", Object.assign({}, { cmd, amount: Number(amount) * 100 || "" }, this.activeId === 300 || this.activeId === 301 ? { num, is_waiting } : {}))
        },
        async onSubmit() {
            try {
                if (!this.validate.checkForm(this.formData)) {
                    const error = this.validate.errorList[0]
                    return this.$showToast(error.msg)
                }
                if (this.loading) return
                this.loading = true
                this.send(this.activeId === 302 ? "start" : "ready", 1)
                this.loading = false
            } catch {
                this.loading = false
            }
        }
    }
}
</script>

<style></style>
